<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距属性 [微调，文字或者图片]*/
			img{
				/* margin注意：行内块 可以设置该款， 在一行内显示，无法设置居中 */
				border: 1px solid red;
				/* margin 属性值 顺时针 上 右 下 左 */
				margin: 200px;
				/* margin属性 顺时针 上下  右左 */
				margin: 100px 200px ;
				/* 常用 盒子自适应居中 自适应居中 必须设置宽度*/
				margi n: auto auto;
				/* margin 三个属性值 顺时针 上 右左 下 */
				margin: 200px 100px 300px;
				/* margin: 四个属性值 顺时针 上 右 下 左 */
				margin: 100px 200px 300px 400px;
			}
			h1{
				/* 块元素设置居中 text-align:center */
				width: 100%;
				border: 1px solid red;
				margin: auto auto;
			}
			span{
				/* 行元素：不可设置高宽 在一行内显示 */
				width: 100%;
				border: 1px solid red;
				margin: 10000px 200px;
			}
		</style>
	</head>
	<body>
		<!-- 框模型 盒子模型 ：四个部分组成
		                      外边距：边框以外四周，叫外边距
							  margin属性 
							  边框：
							  内边距：边框以内 与内容 之间的距离 叫内边距
							  内容：行内块 元素本身的宽高
							  
		所有元素都存在狂模型当中					  -->
		
		<h1>芙宁那</h1>
		<span>行内元素</span>
		<img src="img/Q版芙宁娜 (22)_爱给网_aigei_com.jpg" alt="阜宁那" width="300px" height="300px"/>
		
	</body>
</html>